<template>
  <div class="index-wrap">
    <div class="index-left">
      <div class="index-left-block">
        <h2><i class="el-icon-menu" />&nbsp;&nbsp;公告板块</h2>
        <div v-for="product in productList" :key="product.id">
          <ul>
            <li v-for="item in product.list" :key="item.id" @click="changeSection(item.name)">
              <img :src="item.src" alt="" width="20px;" class="left-img">
              <a class="left-a" :class="{active: chooseSection === item.name}">{{ item.name }}</a>
              <span v-if="item.hot" class="hot-tag"> hot </span>
            </li>
          </ul>
          <div v-if="!product.last" class="hr" />
        </div>
      </div>
      <div style="text-align: center">
        <el-button type="primary" class="elbut" @click="dialogSectionVisible=true">增加版块</el-button>
      </div>
      <!--      <div class="index-left-block lastest-news">-->
      <!--        <h2>合作伙伴</h2>-->
      <!--        <ul>-->
      <!--          <li v-for="item in newsList" :key="item.id">-->
      <!--            <a :href="item.url">{{ item.title }}</a>-->
      <!--          </li>-->
      <!--        </ul>-->
      <!--      </div>-->
    </div>
    <div class="index-right">
      <!--      <card />-->
      <!--      <span class="right-title">前端</span>-->
      <div class="filter-container" style="margin-bottom: 15px; margin-top: 15px">
        <!--        <el-select v-model="listQuery.terminalType" placeholder="设备类型" clearable style="width: 130px; margin-right: 7px" class="filter-item" @change="handleFilter">-->
        <!--          <el-option v-for="item in terminalTypeOptions" :key="item" :label="item" :value="item" />-->
        <!--        </el-select>-->
        <!--      <el-select v-model="listQuery.terminalType" placeholder="设备类型" clearable class="filter-item" style="width: 130px; margin-right: 7px">-->
        <!--        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />-->
        <!--      </el-select>-->
        <!--        <el-select v-model="listQuery.sort" style="width: 140px; margin-right: 7px" class="filter-item" @change="handleFilter">-->
        <!--          <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />-->
        <!--        </el-select>-->
        <el-date-picker
          v-model="formData.start"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="'00:00:00'"
        />
        -
        <el-date-picker
          v-model="formData.end"
          type="datetime"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="'23:59:59'"
        />
        <el-input v-model="formData.title" placeholder="公告标题" style="width: 100px; margin-left: 7px; margin-right: 7px" @keyup.enter.native="handleFilter" />
        <el-input v-model="formData.author" placeholder="公告发布者" style="width: 150px; margin-right: 7px" @keyup.enter.native="handleFilter" />
        <el-button style="margin-left: 10px" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
        <!--        <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">-->
        <!--          展示详情-->
        <!--        </el-checkbox>-->
      </div>
      <div class="filter-container" style="margin-bottom: 15px; margin-top: 15px">
        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">
          发布公告
        </el-button>
        <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="handleMutiDelete">
          删除公告
        </el-button>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="filterContent"
        element-loading-text="拼命加载中"
        border
        fit
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" min-width="5%" />
        <el-table-column align="center" label="公告Id" min-width="10%">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column label="公告内容" min-width="60%">
          <template slot-scope="scope">
            <div @click="showDetail(scope.row,scope.$index)">
              <contentText :title="scope.row.title" :text="scope.row.text" :num="scope.row.num" :author="scope.row.author" :time="scope.row.time" :top="scope.row.top" :section="scope.row.section" />
            </div>
            <!--            <div v-if="scope.row.top" style="float: left; width: 5%">-->
            <!--              <img width="35px" src="@/assets/icon/top.png">-->
            <!--            </div>-->
          </template>
        </el-table-column>
        <el-table-column label="操作公告" align="center" min-width="25%">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row,scope.$index)">
              编辑
            </el-button>
            <el-button v-if="!scope.row.top" size="mini" type="success" @click="postTop(scope.row)">
              置顶
            </el-button>
            <el-button v-if="scope.row.top" size="mini" @click="cancelTop(scope.row)">
              取消置顶
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row,scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
        <!--        <el-table-column label="Author" width="110" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-tag>{{ scope.row.author }}</el-tag>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="Readings" width="115" align="center">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.pageviews }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column align="center" label="PDate" width="220">-->
        <!--          <template slot-scope="scope">-->
        <!--            <i class="el-icon-time" />-->
        <!--            <span>{{ scope.row.display_time }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <!--      <div v-for="item in contentList" :key="item.id">-->
      <!--        <contentText :title="item.title" :text="item.text" :num="item.num" :author="item.author" :time="item.time"/>-->
      <!--      </div>-->
    </div>
    <el-dialog title="新增板块" :visible.sync="dialogSectionVisible">
      <table id="tableSec" style="width: 90%; border-spacing: 20px">
        <tr>
          <td align="right">板块名称:</td>
          <td><el-input v-model="newSection" placeholder="请输入内容" /></td>
        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSectionVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="addSection">
          确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="70%">
      <table id="table" style="width: 90%; border-spacing: 20px">
        <tr>
          <td style="text-align: right"><span>公告板块:</span></td>
          <td>
            <el-select v-model="chooseContent.section" placeholder="请选择">
              <el-option
                v-for="item in productList.pc.list"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </td>
        </tr>
        <tr>
          <td align="right">公告标题:</td>
          <td><el-input v-model="chooseContent.title" placeholder="请输入内容" /></td>
        </tr>
        <!--        <tr>-->
        <!--          <td align="right">发布日期:</td>-->
        <!--          <td>-->
        <!--            <el-date-picker-->
        <!--              v-model="chooseContent.time"-->
        <!--              type="datetime"-->
        <!--              placeholder="选择日期时间"-->
        <!--              default-time="12:00:00"-->
        <!--            />-->
        <!--          </td>-->
        <!--        </tr>-->
        <tr>
          <td style="vertical-align: top; text-align: right">公告内容:</td>
          <td>
            <tinymce v-if="dialogFormVisible" v-model="chooseContent.text" />
          </td>
        </tr>
        <tr>
          <td align="right">发布者:</td>
          <td><el-input v-model="chooseContent.author" placeholder="请输入内容" /></td>
        </tr>
        <tr>
          <td align="right"><span>是否置顶:</span></td>
          <td>
            <el-radio v-model="chooseContent.top" :label="true" border size="medium">是</el-radio>
            <el-radio v-model="chooseContent.top" :label="false" border size="medium">否</el-radio>
          </td>
        </tr>
        <!--        <tr>-->
        <!--          <td />-->
        <!--          <td><el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">提交</el-button></td>-->
        <!--        </tr>-->
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="loadDraft">
          载入草稿
        </el-button>
        <el-button type="success" style="margin-right: 40px" @click="saveDraft">
          保存草稿
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="公告详情" :visible.sync="dialogContentVisible" width="70%">
      <div class="context-title">
        {{ chooseContent.title }}
      </div>
      <div class="box"><span class="time">发表时间：{{ chooseContent.time }}</span><br></div>
      <div class="context-container">
        <div class="context">
          <p style="text-align: center">{{ chooseContent.section }}</p>
          <br>
          <p style="text-align: justify" v-html="chooseContent.text" />
          <br>
        </div>
        <div class="bj">公告发布者：{{ chooseContent.author }}</div>
        <br style="clear: both">
      </div>
    </el-dialog>
    <!--    <div class="index-right">-->
    <!--      <slide-show :slides="slides" :inv="3000" />-->
    <!--      <div class="index-board-list">-->
    <!--        <div-->
    <!--          v-for="(item,index) in boardList"-->
    <!--          :key="item.id"-->
    <!--          class="index-board-item"-->
    <!--          :class="[{'line-last':index % 2 !==0},'index-board-'+item.id]"-->
    <!--        >-->
    <!--          <div class="index-board-item-inner">-->
    <!--            <h2>{{ item.title }}</h2>-->
    <!--            <p>{{ item.description }}</p>-->
    <!--            <div class="index-board-button">-->
    <!--              <a href="detail/analysis" class="button">立即购买</a>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="index-content" />-->
    <!--    </div>-->
  </div>
</template>

<script>
// import slideShow from '@/components/slideShow'
import contentText from '@/components/notice/contentText'

import tinymce from '@/components/Tinymce'

export default {
  name: 'Notice',
  components: {
    contentText,
    tinymce
  },
  data() {
    return {
      formData: {
        start: '',
        end: '',
        title: '',
        author: ''
      },
      chooseSection: '最新公告',
      newSection: '',
      multipleSelection: [],
      dialogContentVisible: false,
      dialogFormVisible: false,
      dialogSectionVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑公告',
        create: '发布公告'
      },
      listLoading: false,
      draftContent: {
        title: '',
        text: '',
        href: '',
        num: '',
        author: '',
        time: '',
        top: true,
        section: ''
      },
      chooseContent: {
        title: '',
        text: '',
        href: '',
        num: '',
        author: '',
        time: '',
        top: true,
        section: ''
      },
      chooseIndex: -1,
      filterContent: [],
      contentList: [
        {
          title: '铸忠诚担当之魂、锻业务精进之能、守廉洁自律之本',
          text: '2月24日下午，长寿路街道党工委召开2021年全面从严治党第一次专题会议，街道党政领导班子成员参加了会议。会议传达学习了十九届中央纪委五次全会精神、十一届市纪委五次全会精神和十届区纪委六次全会精神;传达学习了《中共上海市普陀区委关于进一步推进落实全面从严治党“四责协同”机制向基层延伸的指导意见（试行）》文件精神;讨论并听取了《2021年长寿路街道党工委全面从严治党工作要点》和《长寿路街道党工委关于街道各级党组织落实全面从严治党主体责任的工作方案》等意见建议;部署了今年街道党政领导履行党风廉政建设职责的相关要求。\n' +
            '\n' +
            '\n' +
            '街道党工委书记赵平对落实全面从严治党工作提出了明确要求：.\n' +
            '\n' +
            '1.要政治过硬 \n' +
            '\n' +
            '铸牢忠诚担当之魂\n' +
            '\n' +
            '全体党政领导必须深入贯彻全面从严治党方针，坚定正确政治方向，保持政治定力，始终在思想上清醒、政治上坚定、行动上自觉，以更加过硬的执着和韧劲纵深推进全面从严治党。\n' +
            '\n' +
            '2.要工作过硬\n' +
            '\n' +
            '锻造业务精进之能\n' +
            '\n' +
            '党员干部要继续保持干事创业的内生动力，把实施“十四五”规划、巡视巡察反馈问题整改、常态化疫情防控责任落实、做好“六稳”“六保”工作、严肃换届纪律和加强换届风气监督以及相关专项整治等作为自我监督检查的重点，继续保持昂扬的斗志，着力服务保障经济社会发展。\n' +
            '\n' +
            '3.要作风过硬\n' +
            '\n' +
            '严守廉洁自律之本\n' +
            '\n' +
            '大家要树立党纪法规意识，要有时刻有受约束、受监督的准备和意识。继续保持谦虚谨慎的作风，牢固树立法治意识、程序意识、完善制度机制，公正规范履职，确保工作的制度性和规范性，为奋力谱写新时代普陀发展新篇章，助推长寿各项工作高质量发展营造风清气正的政治生态和发展环境。\n',
          href: 'https://segmentfault.com/a/1190000019287040',
          num: '34',
          author: '疯狂的技术宅',
          time: '1天前',
          top: true,
          section: '社区活动'
        },
        {
          title: '长寿路街道祝您新一年牛气十足！',
          text: '玉鼠辞旧岁，金牛报春时。在这辞旧迎新的美好时刻，长寿路街道党工委、办事处向广大市民，向假日期间仍坚守在岗位上的同志们，向关心支持长寿路街道高质量发展的社会各界人士，致以新年的问候和美好的祝愿！\n' +
            '\n' +
            '回顾刚刚走过的2020年，喜悦浸润着汗水，成功伴随着艰辛。在区委、区政府的坚强领导下，长寿路街道积极应对疫情影响，创新推进党建引领城市基层治理，力补民生短板，实现了疫情防控和经济社会发展“双胜利”。\n' +
            '\n' +
            '岁序易，华章新。2021年，是中国共产党成立100周年，是“十四五”开局之年。上下同欲者胜，风雨同舟者兴。新的一年，长寿路街道将抓好社会治理、经济发展、城市建设、民生保障等工作，以更高的标准、更严的要求、更实的作风，当好为民服务的“孺子牛”、创新发展的“拓荒牛”、艰苦奋斗“老黄牛”，努力让发展成果更大范围更广程度惠及街道人民群众，奋力开启“十四五”新征程！\n',
          href: 'https://segmentfault.com/a/1190000019283751',
          num: '21',
          author: 'joking_zhang',
          time: '13小时前',
          top: true,
          section: '停水停电'
        },
        {
          title: '新春佳节临近，长寿卫士最想送你一张“平安福”',
          text: '\n' +
            '\n' +
            '这个春节，无论是回家过年\n' +
            '\n' +
            '还是就地过年\n' +
            '\n' +
            '平安就是最好的过年形式\n' +
            '\n' +
            '无论天涯海角\n' +
            '\n' +
            '惟愿人人“此心乡”\n' +
            '\n' +
            '\n' +
            '\n' +
            '新春佳节临近\n' +
            '\n' +
            '长寿平安卫士多管齐下、多点聚焦\n' +
            '\n' +
            '紧锣密鼓地开展节前安全大检查\n' +
            '\n' +
            '及时消除各类隐患\n' +
            '\n' +
            '确保群众过上一个幸福祥和平安年\n' +
            '\n' +
            '\n' +
            '\n' +
            '    他们最想送你的    \n' +
            '\n' +
            '   就是一张“平安福” \n',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false,
          section: '宠物管理'
        },
        {
          title: '寿路街道2020年居民区主要负责人、储备干部研修班圆满收官 ',
          text: '12月4日，长寿路街道举行2020年度居民区主要负责人、储备干部研修班第四期课程暨结业仪式，近80名学员参加研修学习。\n' +
            '\n' +
            '普陀区民政局副局长郑宣、长寿路街道办事处副主任范晔出席结业仪式，为学员代表们颁发结业证书并讲话。\n' +
            '\n' +
            '区民政局副局长郑宣在结业仪式中指出学员们通过本次学习，基本实现了“提高站位、明确目标、增强信心”的目的。结合本次研修班和明年即将开始的居委会换届选举，她对居民区主要负责人就现阶段做好换届选举前期准备工作提出了3点要求：\n' +
            '\n' +
            '1、要排摸好人选\n' +
            '\n' +
            '在仔细梳理目前居委会属地化人选、班子队伍现状的前提下，进一步把好人选资格关。\n' +
            '\n' +
            '2、要把握好政策\n' +
            '\n' +
            '既要对往届换届选举进行回顾的基础上找出薄弱环节、提出解决措施；也要待市、区层面最新的换届选举政策要求明确后，通过各类培训吃透、弄懂选举政策，严格依法依规依程序推进，确保选举圆满成功。\n' +
            '\n' +
            '3、要研究好居情\n' +
            '\n' +
            '对于各居民区的潜在隐患、矛盾问题跨前一步、妥善应对，避免小矛盾引发大问题，为各居民区换届选举营造良好、平稳的氛围。\n' +
            '\n' +
            '讲话最后，郑宣副局长鼓励学员们：社区工作对象千人千面，社区治理情况千变万化，社区问题关系千丝万缕，大家要千辛万苦克服各种困难问题，让百姓满意的同时提升自身社区工作的能力。\n' +
            '\n' +
            '街道办事处副主任范晔在结业仪式讲话中指出：社区工作是成长的助推器，在座的各位居民区负责人、储备干部来自不同领域，在解决千变万化的社区问题过程中成长迅速，要通过不断学习和积累，在攻坚克难之下打造一支肯干、务实的社区治理队伍，共同为建设精彩长寿而奋斗。\n' +
            '\n' +
            '最后一期研修班课程着重围绕，居民区各类规章制度组织开展学习，旨在提高居民区主要负责人和储备干部纪律意识和工作作风。\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '街道纪工委副书记、监察办副主任汪蓉蓉以“居民区党风廉政建设负面清单”为主题，结合案例进行分析，强调居民区干部一定要实事求是，提高廉政风险防范意识。\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '社区自治办副主任陈悦乐主要就居民区值班和错时接待、请假和外出报告等与居民区工作息息相关的制度中的重点内容进行了强调。\n' +
            '\n' +
            '\n' +
            '针对业委会工作这块难啃的骨头，新长寿业委会工作事务所所长莫庆勇为大家来支招。拥有2年内接待200多批次、5000余人来访经验的莫庆勇围绕“业委会工作实务操作”主题，从解读小区业委会议事规则、提高公示公告张贴覆盖面的角度给学员们上了生动的一堂课。\n' +
            '\n' +
            '通过近两个月的系列培训学员们获益良多，锦绣里居民区书记方荣生在汇报发言中表示：要进一步增强责任之心、勇于担当作为，努力推进居民区工作。谈家渡居民区副书记陈晓英表示：通过研修班学习获取真知，增强了带好班子队伍的信心和决心。半岛花园居委会主任徐潇表示：要将学习到的知识本领贯彻到社区工作中去，努力提升服务质量，增强居民获得感。圣骊澳门苑居委会社工陆祎琼表示：作为一名储备干部，未来要更努力肩负起在社区中的责任，促进社区工作的整体提升。\n',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false,
          section: '社区党建'
        },
        {
          title: '烟火气回来了！谈家渡路上为老助餐点恢复运营 ',
          text: '位于谈家渡路139号,沿街门面房的东新片区为老助餐点今天起恢复运营啦！\n' +
            '\n' +
            '由于疫情影响，位于谈家渡路139号沿街门面房的东新片区为老助餐点在春节前停止运营。在这之后三个多月的抗疫工作期间，长寿路街道社区服务办一直关注着助餐点员工离沪返沪情况、恢复运营准备、应急预案等情况。\n' +
            '\n' +
            '随着现在疫情的相对稳定，东新片区为老助餐点关注到周边老人们对于服务的迫切需求，于5月6日起正式恢复运营啦！\n' +
            '\n' +
            '为了充分保证老年助餐点的安全运营和社区居民的用餐安全，防控措施严之又严、细之又细。\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '内部控制\n' +
            '\n' +
            '1、助餐点所有工作人员，每日上岗前都要体温测量正常、健康状况良好和个人卫生消毒，上班期间全程佩戴口罩；\n' +
            '\n' +
            '2、助餐点在每个就餐段前后都要进行一次全面消毒，并保持用餐场所的通风。\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '就餐管理\n' +
            '\n' +
            '1、用餐居民要在测温点，进行现场体温测量并登记；\n' +
            '\n' +
            '2、取餐点和充值点做好1米间隔标示，用餐居民在取餐和充值时要间隔1米排队，并且必须佩戴口罩；\n' +
            '\n' +
            '3、在服务窗口配置免洗手消毒液和纸巾，用餐居民进入助餐点内要进行手部消毒。\n' +
            '\n' +
            '\n' +
            '\n' +
            '\n' +
            '助餐形式\n' +
            '\n' +
            ' \n' +
            '\n' +
            '午餐：每日中午11:00至13:00\n' +
            '\n' +
            '晚餐：每日下午16:30至18:00\n',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false,
          section: '警务资讯'
        },
        {
          title: '聚焦常压锅炉检查',
          text: '为确保辖区内常压锅炉锅炉安全运行，减少严寒气候下使用隐患，同时根据《关于开展2020年普陀区冬季锅炉专项检查的通知》文件要求，社区平安办对辖区内所有常压锅炉使用单位开展冬季常压锅炉安全检查，重点检查使用单位安全管理制度、日常维护保养记录、设备档案资料、应急救援演练、安全管理人员及作业人员持证上岗等情况。' +
           '近日，街道平安办配合长寿市场监督管理所对辖区内多家常压锅炉使用单位开展抽查工作，此次共抽查常压锅炉使用单位3家，常压锅炉8台，现场发现7台锅炉未张贴“常压锅炉不得承压使用”的警示标志，1台锅炉的大气连通管安装阀门，已责令相关单位进行整改，消除锅炉安全隐患。',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false,
          section: '其他公告'
        },
        {
          title: '开展托育机构检查',
          text: '日前，社区平安办配合街道发展办开展违规托育机构检查工作，期间发现灭火器过期，消火栓周围有遮挡，配电设备房堆物等消防安全隐患。当即对2家开具整改意见书要求进行整改。\n' +
            '\n' +
            '微信图片_20210208165457.jpg\n' +
            '\n' +
            '关注“美食城”安全\n' +
            '\n' +
            '日前，社区平安办配合街道发展办开展违规托育机构检查工作，期间发现灭火器过期，消火栓周围有遮挡，配电设备房堆物等消防安全隐患。当即对2家开具整改意见书要求进行整改。\n',
          href: 'https://segmentfault.com/a/1190000019279667',
          num: '75',
          author: '江南一点雨',
          time: '34分钟前',
          top: false,
          section: '其他公告'
        }
      ],
      newsList: [],
      productList: {
        pc: {
          id: 1,
          title: '技术频道',
          list: [
            {
              src: require('@/assets/icon/postTop.png'),
              name: '最新公告',
              url: '/article/js',
              hot: true
            },
            {
              src: require('@/assets/icon/activity.png'),
              name: '社区活动',
              url: '/article/back'
            },
            {
              src: require('@/assets/icon/waterAndElec.png'),
              name: '停水停电',
              url: '/article/ai'
            },
            {
              src: require('@/assets/icon/pet.png'),
              name: '宠物管理',
              url: 'www.baidu.com'
            },
            // 直接去掉，在别的板块单独显示
            // {
            //   src: require('@/assets/icon/dangjian.png'),
            //   name: '社区党建',
            //   url: 'www.baidu.com'
            // },
            // {
            //   src: require('@/assets/icon/police.png'),
            //   name: '警务资讯',
            //   url: 'www.baidu.com'
            // },
            // {
            //   src: require('@/assets/icon/ios.png'),
            //   name: 'ios',
            //   url: 'www.baidu.com'
            // },
            {
              src: require('@/assets/icon/other.png'),
              name: '其他公告',
              url: 'www.baidu.com'
            }
          ]
        }
        // draft: {
        //   list: [
        //     {
        //       src: require('@/assets/icon/draft.png'),
        //       name: '草稿箱',
        //       url: '/article/js'
        //     }]
        // }
      }
    }
  },
  created: function() {
    this.filterContent = this.contentList
    // this.$http.get('api/newsList')
    //   .then((res) => {
    //     this.newsList = res.data
    //   }, (err) => {
    //     console.log(err)
    //   })
  },
  methods: {
    saveDraft() {
      this.draftContent = Object.assign({}, this.chooseContent) // copy obj
    },
    loadDraft() {
      this.chooseContent = Object.assign({}, this.draftContent) // copy obj
    },
    postTop(row) {
      row.top = true
    },
    cancelTop(row) {
      row.top = false
    },
    addSection() {
      this.productList.pc.list.push({
        src: require('@/assets/icon/newOther.png'),
        name: this.newSection
      })
      this.dialogSectionVisible = false
      this.$notify({
        title: 'Success',
        message: '增加成功',
        type: 'success',
        duration: 2000
      })
    },
    changeSection(sec) {
      if (sec === '最新公告') {
        this.filterContent = this.contentList
        this.chooseSection = sec
        return
      }
      this.chooseSection = sec
      this.filterContent = this.contentList.filter(item => {
        return item.section === sec
      })
    },
    showDetail(row, index) {
      this.chooseContent = Object.assign({}, row) // copy obj
      this.chooseIndex = index
      // this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogContentVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    handleDelete(row, index) {
      this.$notify({
        title: 'Success',
        message: 'Delete Successfully',
        type: 'success',
        duration: 2000
      })
      console.log(this.contentList[index])
      this.contentList.splice(index, 1)
    },
    handleUpdate(row, index) {
      this.chooseContent = Object.assign({}, row) // copy obj
      console.log(this.chooseContent)
      this.chooseIndex = index
      // this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].clearValidate()
      // })
    },
    updateData() {
      const date = new Date()
      const year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      this.chooseContent.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      this.contentList.splice(this.chooseIndex, 1, this.chooseContent)
      this.dialogFormVisible = false
      this.$notify({
        title: 'Success',
        message: 'Update Successfully',
        type: 'success',
        duration: 2000
      })
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      //     const tempData = Object.assign({}, this.temp)
      //     tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
      //     updateArticle(tempData).then(() => {
      //       const index = this.list.findIndex(v => v.id === this.temp.id)
      //       this.list.splice(index, 1, this.temp)
      //       this.dialogFormVisible = false
      //       this.$notify({
      //         title: 'Success',
      //         message: 'Update Successfully',
      //         type: 'success',
      //         duration: 2000
      //       })
      //     })
      //   }
      // })
    },
    createData() {
      const date = new Date()
      const year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      this.chooseContent.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      this.contentList.unshift(this.chooseContent)
      this.dialogFormVisible = false
      this.$notify({
        title: 'Success',
        message: 'Created Successfully',
        type: 'success',
        duration: 2000
      })
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      //     this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
      //     this.temp.author = 'vue-element-admin'
      //     createArticle(this.temp).then(() => {
      //       this.list.unshift(this.temp)
      //       this.dialogFormVisible = false
      //       this.$notify({
      //         title: 'Success',
      //         message: 'Created Successfully',
      //         type: 'success',
      //         duration: 2000
      //       })
      //     })
      //   }
      // })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleMutiDelete() {
      if (this.multipleSelection.length) {
        this.multipleSelection.forEach(element => {
          const index = this.contentList.findIndex(item => item === element)
          this.contentList.splice(index, 1)
        })
        this.$notify({
          title: 'Success',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      } else {
        this.$message({
          message: '请选择至少一个选项',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style scoped>
  .active {
    font-weight: bold;
  }
  .index-wrap {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .index-left {
    float: left;
    width: 240px;
    text-align: left;
  }
  .index-right {
    float: left;
    width: 78%;
    margin-bottom: 10px;
  }
  .index-left-block {
    margin: 15px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
  }
  .index-left-block .hr {
    margin-bottom: 20px;
  }
  .index-left-block h2 {
    background: #6d9eeb;
    color: #fff;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-weight: bold;
  }
  .index-left-block h3 {
    font-size: 14px;
    padding: 0 15px 5px 15px;
    color: #212121;
  }
  .index-left-block ul {
    padding: 0 15px;
    text-shadow: 0 0 black;
    background-color: white;
    line-height: 30px;
    color: #757575;
    padding-left: 30p;
    font-size: 14px;
    list-style-type: none;
  }
  .h3-line{
    color: #d4d4d4;
  }
  .index-left-block li {
    padding: 7px;
    border-radius: 10px;
  }
  .index-left-block li:hover {
    background-color: #d8ecff;
  }
  .left-img{
    display:inline-block;
    vertical-align: middle;
  }
  .left-a{
    display: inline-block;
    margin-left: 10px;
  }
  .index-board-list {
    overflow: hidden;
  }
  .index-board-item {
    float: left;
    width: 400px;
    background: #fff;
    box-shadow: 0 0 1px #ddd;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .index-board-item-inner {
    min-height: 200px;
    padding-left: 180px;
    position: relative;
  }
  /*.index-board-car .index-board-item-inner{*/
  /*  background: url(~@/assets/images/1.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-loud .index-board-item-inner{*/
  /*  background: url(~@/assets/images/2.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-earth .index-board-item-inner{*/
  /*  background: url(~@/assets/images/3.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  /*.index-board-hill .index-board-item-inner{*/
  /*  background: url(~@/assets/images/4.png) no-repeat;*/
  /*  background-size: 150px;*/
  /*}*/
  .index-board-item h2 {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
  }
  .index-board-item p{
    font-size: 12px;
    width: 200px;
    line-height: 20px;
  }

  .line-last {
    margin-right: 0;
  }
  .index-board-button {
    position: absolute;
    bottom: 0px;
  }
  .lastest-news {
    min-height: 512px;
  }
  .hot-tag {
    background: red;
    color: #fff;
  }
  .new-item {
    display: inline-block;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right-content{
    width:100%;
    float: left;
    margin-top: 20px;
  }
  .right-title{
    display: inline-block;
    width:100%;
    margin-top: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
  }
  /deep/ .elbut {
    width: 160px;
    background: #6d9eeb;
  }
  .context-title {
    font-size: 24px;
    color: #444444;
    text-align: center;
    font-weight: bold;
    line-height: 38px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
  }
  .time {
    color: #999;
    font-size: 14px;
    float: left;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
  }
  .context {
    color: #444444;
    font-size: 16px;
    line-height: 32px;
  }
  .context p {
    text-indent: 2em;
    display: block;
    /* margin-block-start: 1em; */
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin: 0 0;
    padding: 0 0;
  }
  .bj {
    float: right;
    margin-top: 75px;
    color: #777777;
  }
  .context-container {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 0 0 20px;
  }
</style>

